<template>
  <div class="container">
    <scroll-view :scroll-y="true"
                 :style="{'height': '100%'}"
                 class="scroll_view">
      <div class="spxx">
        <div class="left-box">
          <img :src="expresLogo"
               alt="">
        </div>
        <div class="right-box">
          <div class="rsubbox r-top">
            <p>
              物流公司：&nbsp;
              <span>{{expresName}}</span>
            </p>
          </div>
          <div class="rsubbox r-botm">
            <p>
              物流单号：&nbsp;
              <span>{{logistics_num}}</span>
            </p>
          </div>
        </div>
      </div>
      <div class="wlxx">
        <ul>
          <li v-if="item.content"
              :class="{'deliver':index==0}"
              v-for="(item,index) in expresMsgList"
              :key="index">
            <div class="left-box">
              <p class="p-m">{{item.m}}</p>
              <p class="p-h">{{item.h}}</p>
            </div>
            <div class="center-box">
              <span class="s1"
                    :class="{'deliver':index==0}"></span>
              <span class="s2"></span>
            </div>
            <div class="bottom-box">
              <p :class="{'deliver':index!=0}">派送中:</p>
              <p>{{item.content}}</p>
            </div>
          </li>
        </ul>
      </div>
    </scroll-view>
    <div class="zhanwei"></div>
  </div>
</template>

<script>
import common from "@/assets/js/mmk_common.js";

export default {
  data () {
    return {
      expresName: "中通快递",
      orderNum: "20180922995656100",
      deliver: true,
      expresLogo: "",
      expresMsgList: [],
      logistics_num: ""
    };
  },

  methods: {
    getData () {
      common.fly_post("/api/v4_2/order/odd_list", {
        odd: this.orderNum
      }, result => {
        let res = result.data;
        if (res.status_code == 0) {
          //物流信息
          this.expresMsgList = res.data.list;

          for (var i = 0; i < this.expresMsgList.length; i++) {
            this.expresMsgList[i].m = this.expresMsgList[i].time.substr(5, 5);
            this.expresMsgList[i].h = this.expresMsgList[i].time.substr(14, 5);
            if (this.expresMsgList[i].content == "null") {
              this.expresMsgList[i].content = ""
            }
          }
          // 快递单号
          this.logistics_num = res.data.no
          //快递公司
          this.expresName = res.data.name;
          //快递logo
          this.expresLogo = res.data.logo;
        } else {
          wx.showToast({
            title: res.message,
            icon: "none",
            duration: 2000,
            mask: true
          });
          return false;
        }
      })

    }
  },
  onLoad (options) {
    Object.assign(this.$data, this.$options.data());
    this.orderNum = options.order_sn;
    this.getData();
  }
};
</script>

<style lang="less" scoped>
.container {
  width: 100%;
  height: 100%;
  // border: 1px solid red;
  background: #fbfbfb;
  padding-top: 10px;
  position: relative;
  box-sizing: border-box;
  .spxx {
    // border: 1px solid blue;
    position: relative;
    height: 120px;
    box-sizing: border-box;
    padding: 15px;
    margin-bottom: 10px;
    background: #fff;
    .left-box {
      // border: 1px solid red;
      width: 30%;
      height: 100%;
      float: left;
      img {
        width: 100%;
        height: 100%;
      }
    }
    .right-box {
      // border: 1px solid red;
      width: 68%;
      height: 100%;
      float: right;
      .rsubbox {
        // border: 1px solid red;
        height: 50%;
        p {
          color: #666;
          font-size: 14px;
          line-height: 40px;
        }
      }
    }
  }
  .wlxx {
    // height: 500px;
    position: relative;
    // border: 1px solid red;
    box-sizing: border-box;
    padding: 15px;
    // background: #fff;
    ul {
      width: 100%;
      height: 100%;
    }
    li {
      position: relative;
      width: 100%;
      // border: 1px solid red;
      // height: 100px;
      // min-height: 100px;
      box-sizing: border-box;
      color: #cccccc;
      margin-bottom: 30px;

      &.deliver {
        color: #666;
      }
      .left-box {
        min-height: 100px;
        width: 15%;
        // height: 100%;
        // border: 1px solid black;
        float: left;
        p {
          // border: 1px solid black;
          text-align: center;
          &.p-m {
            font-size: 16px;
          }
          &.p-h {
            font-size: 14px;
          }
        }
      }
      .center-box {
        min-height: 100px;
        width: 10%;
        // border: 1px solid black;
        float: left;

        .s1 {
          display: block;
          width: 12px;
          height: 12px;
          border-radius: 50%;
          margin: auto;
          background: #d8d8d8;
          &.deliver {
            width: 18px;
            height: 18px;
            background: #f64665;
          }
        }

        .s2 {
          display: block;
          background: #ccc;
          border-left: 1px solid #ccc;
          width: 1%;
          height: 50px;
          margin: auto;
          margin-top: 15px;
        }
      }
      .bottom-box {
        width: 75%;
        // height: 100%;
        min-height: 100px;
        // border: 1px solid black;

        float: left;
        p {
          font-size: 14px;
          padding-bottom: 10px;

          &.deliver {
            display: none;
          }
        }
      }
    }
  }
}
.zhanwei {
  width: 100%;
  height: 70px;
  border: solid 1px red;
}
</style>


